
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="../plugins/layui/css/myPage.css">
</head>
<body  >
<div class="layui-container">

        <div class="layui-row">
            <div class="layui-col-md6">

                    <fieldset class="layui-elem-field  " style="border-bottom: 0px">
                        <legend>上传文件 </legend>

                    <!--<div class="layui-upload-list" >-->
                        <!--<table class="layui-table" lay-filter="layui-upload-list" >-->
                            <!--<thead>-->
                            <!--<tr><th>文件名</th>-->
                                <!--<th>大小</th>-->
                                <!--<th>状态</th>-->
                                <!--<th>操作</th>-->
                            <!--</tr>-->
                            <!--</thead>-->
                            <!--<tbody id="uploadList"></tbody>-->
                            <input type="hidden" name="khid" id="khid">
                            <input type="hidden" name="isU" id="isU">


                        <!--</table>-->
                    <!--</div>-->

                        <div class="layui-upload-list" >
                            <table id="fileUploadInfo" lay-filter="fileUploadInfo"></table>
                            <script type="text/html" id="uploadOpera">

                                    {{# if(d.filestate == "上传失败"){ }}
                                        <button class="layui-btn layui-btn-xs demo-reload  " lay-event="reUpload">重传</button>
                                    {{# }else if(d.filestate == "上传成功"){ }}
                                         <button class="layui-btn layui-btn-xs layui-btn-danger demo-delete layui-btn-disabled" lay-event="del" disabled="disabled">删除</button>
                                    {{# }else { }}
                                          <button class="layui-btn layui-btn-xs layui-btn-danger demo-delete" lay-event="del">删除</button>
                                    {{# } }}


                            </script>
                        </div>
                    </fieldset>


                <span style="font-size:15px">上传文件类型为word、pdf、照片,每次上传数量不超过十个,每个文件大小不超过10M</span>
                <div style="position: relative;left: 190px;bottom: 0px">
                    <button type="button" class="layui-btn layui-btn-normal" id="testList">选择文件</button>
                    <button type="button" class="layui-btn layui-btn-normal" id="testListAction">开始上传</button>
                </div>

            </div>

            <div class="layui-col-md6">
                <div class="layui-upload">
                    <fieldset class="layui-elem-field  " style="border-bottom: 0px">
                        <legend>下载文件</legend>
                        <div class="layui-upload-list" >
                            <table id="fileInfo" lay-filter="fileInfo"></table>
                            <script type="text/html" id="opera">


                                {{# if(getQueryVariable("U") == "false"){ }}

                                <button class="layui-btn layui-btn-danger layui-btn-xs layui-btn-disabled" disabled lay-event="del">删除</button>
                                {{# }else{ }}
                                <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>
                                {{# } }}

                                {{# if(getQueryVariable("R") == "false"){ }}

                                <button class="layui-btn layui-btn-normal layui-btn-xs layui-btn-disabled" disabled lay-event="down">下载</button>
                                {{# }else{ }}
                                <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="down">下载</button>
                                {{# } }}




                            </script>
                        </div>
                    </fieldset>
                </div>
            </div>
        </div>
</div>
<script src="../plugins/layui/layui.js"></script>
<script src="../js/config.js"></script>
<script src="../js/tools.js"></script>
<script>
    //多文件列表示例
    layui.use(['table','form','layer','upload'],function () {
        var table = layui.table;
        var form = layui.form;
        var upload = layui.upload;
        var $ = layui.$;
        var tableheight=  'full-135';



//多文件 少一个参数即可 不指定 fileid
        var url = contextPath+"/files/?tablename="+"cusinfo&ownerid="+$("#khid").val()+"&fileid=";
        // console.log(url);
        var demoListView = $('#uploadList');
        var jsonRes = new Array();
        //提前渲染一次上传表格
        var currentPageup = 1;
        //role
        if($("#isU").val() == "false"){
            $("#testList").attr("disabled",true);
            $("#testList").addClass("layui-btn-disabled");
            $("#testListAction").attr("disabled",true);
            $("#testListAction").addClass("layui-btn-disabled");
        }

        table.render({
            elem:'#fileUploadInfo'
            ,page:{
                layout:['prev', 'page', 'next','skip','count']
            }
            ,cellMinWidth: 80
            ,height:tableheight
            ,data: jsonRes
            ,limit: 10
            ,cols: [[
                {type:'numbers', title: '序号',  align:'center'}
                ,{field:'filename', title: '文件名称' ,align: 'center' } //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                ,{field:'filesize', title: '文件大小' ,align: 'center' }
                ,{field:'filestate', title: '文件状态' ,align: 'center' }
                ,{fixed: 'right',title:'操作', align:'center', templet: '#uploadOpera' }

            ]]
        });
//批量上传渲染
        var uploadListIns = upload.render({
            elem: '#testList'
            ,url: url
            ,accept: 'file'
            ,exts:'doc|docx|pdf|bmp|jpeg|jpg|pptx|png|gif'
            ,size:'10240'
            ,multiple: true
            ,auto: false
            ,bindAction: '#testListAction'
            ,number:10
            ,choose: function(fileobj){
                var files = this.files = fileobj.pushFile(); //将每次选择的文件追加到文件队列

                //读取本地文件

                fileobj.preview(function(fileindex, file, result){




                        var json = {};
                        json.filename = file.name;
                        json.filesize = (file.size/1024).toFixed(1)+"Kb";
                        json.filestate = "等待上传";
                        json.fileindex = fileindex;
                        jsonRes.push(json);

                        table.render({
                            elem:'#fileUploadInfo'
                            ,page: {
                                curr: currentPageup //重新从第 1 页开始
                                ,layout:['prev', 'page', 'next','skip','count']
                            } //开启分页
                            ,cellMinWidth: 80
                            ,height:tableheight
                            ,data: jsonRes
                            ,limit: 10
                            ,cols: [[
                                {type:'numbers', title: '序号',  align:'center'}
                                ,{field:'filename', title: '文件名称' ,align: 'center' } //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                                ,{field:'filesize', title: '文件大小' ,align: 'center' }
                                ,{field:'filestate', title: '文件状态' ,align: 'center' }

                                ,{fixed: 'right',title:'操作', align:'center', templet: '#uploadOpera' }

                            ]]
                            ,done: function(res, curr, count){
                                //得到当前页码
                                console.log(curr);
                                currentPageup = curr;
                            }
                        });
//工具条
                        table.on('tool(fileUploadInfo)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                            var data = obj.data ;//获得当前行数据
                            var layEvent = obj.event; //获得 lay-event 对应的值
                            if(layEvent === 'reUpload'){
                                fileobj.upload(data.fileindex, file);

                            } else if(layEvent === 'del'){
                                 //删除对应的文件
                                uploadListIns.config.elem.next()[0].value = '';
                                obj.del(); //删除对应行（tr）的DOM结构
                                layer.msg("删除成功");
                                console.log(data)


                                for(var i in jsonRes){
                                    if(jsonRes[i].filename == data.filename){


                                        jsonRes.splice(i,1);
                                    }
                                }
                                delete  files[data.fileindex];
                                table.render({
                                    elem:'#fileUploadInfo'
                                    ,page: {
                                        curr: 1 //重新从第 1 页开始
                                        ,layout:['prev', 'page', 'next','skip','count']
                                    } //开启分页
                                    ,cellMinWidth: 80
                                    ,height:tableheight
                                    ,data: jsonRes
                                    ,limit: 10
                                    ,cols: [[
                                        {type:'numbers', title: '序号',  align:'center'}
                                        ,{field:'filename', title: '文件名称' ,align: 'center' } //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                                        ,{field:'filesize', title: '文件大小' ,align: 'center' }
                                        ,{field:'filestate', title: '文件状态' ,align: 'center' }
                                        ,{fixed: 'right',title:'操作', align:'center', templet: '#uploadOpera' }

                                    ]]
                                    ,done: function(res, curr, count){
                                        //得到当前页码
                                        console.log(curr);
                                        currentPageup = curr;
                                    }
                                });
                            }
                        });








                    // demoListView.append(tr);
                });



            }
            ,done: function(res, index, upload){
                // console.log(res + index);
                // console.log(res)
                if(res.message == "上传成功"){ //上传成功
                    // console.log(res);
                    delete this.files[index];
                    $.each(jsonRes,function (i,e) {
                        if(e.filename == res.filename){
                            e.filestate = "上传成功";

                        }
                        //渲染下载表格
                        $.ajax({
                            url: urldownload,
                            type: "GET",
                            contentType:"application/json;charset=utf-8",
                            dataType:"json",
                            success: function(res) {
                                table.render({
                                    elem:'#fileInfo'
                                    ,page: {
                                        curr: currpagedown //重新从第 1 页开始
                                        ,layout:['prev', 'page', 'next','skip','count']
                                    } //开启分页
                                    ,cellMinWidth: 80
                                    ,height:tableheight
                                    ,data: res.list
                                    ,limit: 10
                                    ,cols: [[
                                        {type:'numbers', title: '序号',  align:'center'}
                                        ,{field:'filename', title: '文件名称' ,align: 'center' }
                                        ,{fixed: 'right',title:'操作', align:'center', toolbar: '#opera' }

                                    ]]
                                    ,done: function(res, curr, count){
                                    //得到当前页码
                                    console.log(curr);
                                    currpagedown = curr;
                                }
                                });
                            }
                        });

                    })
                }else {
                    $.each(jsonRes,function (i,e) {
                        if(e.filename == res.filename){
                            e.filestate = "上传失败";
                        }
                    })
                }

                table.render({
                    elem:'#fileUploadInfo'
                    ,page: {
                        curr: currentPageup //重新从第 1 页开始
                        ,layout:['prev', 'page', 'next','skip','count']
                    } //开启分页
                    ,cellMinWidth: 80
                    ,height:tableheight
                    ,data: jsonRes
                    ,limit: 10
                    ,cols: [[
                        {type:'numbers', title: '序号',  align:'center'}
                        ,{field:'filename', title: '文件名称' ,align: 'center' } //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                        ,{field:'filesize', title: '文件大小' ,align: 'center' }
                        ,{field:'filestate', title: '文件状态' ,align: 'center' }
                        ,{fixed: 'right',title:'操作', align:'center', templet: '#uploadOpera' }

                    ]]
                    ,done: function(res, curr, count){
                        //得到当前页码
                        console.log(curr);
                        currentPageup = curr;
                    }
                });
            }
        });



var currpagedown = 1;

        //下载。。。。。。。。。

        var urldownload = contextPath+"/files/all/"+$("#khid").val();
        // console.log(urldownload);


        $.ajax({
            url: urldownload,
            type: "GET",
            contentType:"application/json;charset=utf-8",
            dataType:"json",
            success: function(res) {
                table.render({
                    elem:'#fileInfo'
                    ,page: {
                        curr: currpagedown //重新从第 1 页开始
                        ,layout:['prev', 'page', 'next','skip','count']
                    } //开启分页
                    ,cellMinWidth: 80
                    ,height:tableheight
                    ,data: res.list
                    ,limit: 10
                    ,cols: [[
                        {type:'numbers', title: '序号',  align:'center'}
                        ,{field:'filename', title: '文件名称' ,align: 'center' }
                        ,{fixed: 'right',title:'操作', align:'center', toolbar: '#opera' }

                    ]]
                    ,done: function(res, curr, count){
                        //得到当前页码
                        console.log(curr);
                        currpagedown = curr;
                    }
                });
            }
        });
        //监听工具条
        table.on('tool(fileInfo)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'down'){
                console.log(contextPath+"/files?fileid="+data.fileid);

                window.location.href = contextPath+"/files?fileid="+data.fileid;

            } else if(layEvent === 'del'){

                layer.confirm('确定删除?', function(index){
                    $.ajax({
                        url: contextPath+"/files/"+data.fileid,
                        type: "DELETE",
                        contentType:"application/json;charset=utf-8",
                        dataType:"json",
                        success: function(res) {



                            obj.del(); //删除对应行（tr）的DOM结构
                            layer.msg(res.message);
                            $.ajax({
                                url: urldownload,
                                type: "GET",
                                contentType:"application/json;charset=utf-8",
                                dataType:"json",
                                success: function(res) {
                                    table.render({
                                        elem:'#fileInfo'
                                        ,page: {
                                            curr: 1 //重新从第 1 页开始
                                            ,layout:['prev', 'page', 'next','skip','count']
                                        } //开启分页
                                        ,cellMinWidth: 80
                                        ,height:tableheight
                                        ,data: res.list
                                        ,limit: 10
                                        ,cols: [[
                                            {type:'numbers', title: '序号',  align:'center'}
                                            ,{field:'filename', title: '文件名称' ,align: 'center' }
                                            ,{fixed: 'right',title:'操作', align:'center', toolbar: '#opera' }

                                        ]]
                                        ,done: function(res, curr, count){
                                            //得到当前页码
                                            console.log(curr);
                                            currpagedown = curr;
                                        }
                                    });
                                }
                            });
                        }
                    });

                    layer.close(index);
                    //向服务端发送删除指令
                });
            }
        });
    });




</script>
</body>